<?php

use yii\helpers\Url;
use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use website\helpers\Render;
use common\models\User;
use common\models\Design;
use common\models\Category;
use common\models\UserUpload;

$this->addCrumbs('身份验证');
$this->title = '个人资料';
?>

<div class="contenter">
    <?= $this->render('/user/user_information', ['active' => 'information']) ?>
    <div id="top-processo"></div>
    <div id="user-contentero">
        <div class="box-shadow" id="sub-contenter">
            <div class="data-title"><span class="h3"><?= $this->title ?></span></div>
            <div class="data-content flyer-form">
                <div class="data-mind">
                    <p>注意：图片上传之后不能删除，只能通过覆盖的形式替换</p>
                    <p>　　　个人资料只能填写一次。填写完毕之后，如需修改，请联系客服</p>
                    <p>　　　个人资料填写完毕之后，我们的客服会在最短的时间内与您取得联系，请保持联系方式畅通</p>
                </div>
                <form class="mt-20px" id="flyer-create" enctype="multipart/form-data" onsubmit="return false;">
                    <div class="form-item checker">
                        <div class="input-title">昵称：</div>
                        <div class="input-inline"><input class="flyer-input" name="nickname" type="text" value="<?= $user->nickname ?>"></div>
                        <div class="input-inline input-mid cl-red">*</div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">姓名：</div>
                        <div class="input-inline"><input class="flyer-input" name="realname" type="text" value="<?= $user->realname ?>"></div>
                        <div class="input-inline input-mid cl-red w-380px">* 请输入完整的真实姓名，以免工资结算失败</div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">身份证：</div>
                        <div class="input-inline"><input class="flyer-input" name="id_number" type="text" value="<?= $user->id_number ?>"></div>
                        <div class="input-inline input-mid cl-red">*</div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">现居住地：</div>
                        <div class="input-block"><input class="flyer-input" name="address" type="text" value="<?= $user->address ?>"></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">性别：</div>
                        <div class="input-inline checker gender clear">
                            <input name="gender" value="1" type="radio" flyer="radio" title="男">
                            <input name="gender" value="2" type="radio" flyer="radio" title="女" checked>
                        </div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">出生年月：</div>
                        <div class="input-inline"><input class="flyer-input flyer-date" name="birthday" type="text" value="<?= $user->birthday ?>"></div>
                        <div class="input-inline input-mid cl-red">*</div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">邮箱：</div>
                        <div class="input-inline"><input class="flyer-input" name="email" type="text" value="<?= $user->email ?>"></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">支付宝：</div>
                        <div class="input-inline"><input class="flyer-input" name="alipay" type="text" value="<?= $user->alipay ?>"></div>
                        <div class="input-inline input-mid cl-red w-380px">* 薪资发放支付宝账号，请填写本人实名认证账号</div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">微信：</div>
                        <div class="input-inline"><input class="flyer-input" name="wechat" type="text" value="<?= $user->wechat ?>"></div>
                        <div class="input-inline input-mid cl-red">*</div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">微信二维码：</div>
                        <div class="input-inline" id="wechat-qrcode"></div>
                        <div class="input-inline input-mid cl-red">* 大小不超过1MB</div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">QQ：</div>
                        <div class="input-inline"><input class="flyer-input" name="qq" type="text" value="<?= $user->qq ?>"></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">手持身份证正面照：</div>
                        <div class="input-inline" id="face-photo"></div>
                        <div class="input-inline input-mid w-380px">
                            <p>规范：彩色正面手持身份正面照一张，大小不超过1MB</p>
                            <p class="mt-20px">注意事项：</p>
                            <p>1、五官清晰</p>
                            <p>2、证件信息完全清晰无遮挡</p>
                            <p>3、手持证件照避免镜面拍照</p>
                        </div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">工作年限：</div>
                        <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::radio('work_life', User::$workLifeSelector, $user->work_life) ?></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">擅长类目：</div>
                        <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::checkbox('category_id', $categories, $user->categoriesArray, [], ['value' => 'id']) ?></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">擅长风格：</div>
                        <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::checkbox('style', Design::$styleSelector, $user->stylesArray) ?></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">擅长类型：</div>
                        <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::checkbox('model', $models, $user->modelsArray, [], ['value' => 'id']) ?></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">擅长软件：</div>
                        <div class="input-block"><input class="flyer-input" name="skills" type="text" value="<?= $user->skills ?>"></div>
                        <input class="flyer-input" name="status" type="hidden" value="1">
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">标签：</div>
                        <div class="input-block"><input class="flyer-input" name="tags" type="text" value="<?= $user->tags ?>"></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">个人描述：</div>
                        <div class="input-block"><textarea class="flyer-textarea" name="describe"><?= $user->describe ?></textarea></div>
                    </div>
                    <?php
                    if($user->level == '') {
                        ?>
                        <div class="form-item checker">
                            <div class="input-title">提交作品：</div>
                            <div class="input-block input-mid pl-0px">* 每张最大4MB，尺寸不小于500px*700px，支持jpg/gif/png格式</div>
                            <div class="input-block designs">
                                <div class="design-one"></div>
                                <div class="design-one"></div>
                                <div class="design-one"></div>
                                <div class="design-one"></div>
                                <div class="design-one"></div>
                                <div class="design-one"></div>
                                <div class="design-one"></div>
                                <div class="design-one"></div>
                                <div class="design-one"></div>
                            </div>
                        </div>
                        <?php
                    }
                    ?>
                    <div class="form-item mt-10px">
                        <div class="input-block">
                            <input type="radio"> 同意<span class="cl-red">《
                        <a class="cl-red" href="<?= Url::to('@web/information/service-agreement') ?>">
                            设计师用户协议</a>》</span></div>
                    </div>

                    <div class="form-item checker">
                        <div class="input-title"></div>
                        <div class="input-inline"><button class="flyer-button normal border-round" id="save-button" type="submit">提交,请待审核</button></div>
                    </div>
                    <textarea id="flyer-create-json" data-form="#flyer-create" style="display:none;"><?= User::checker('information') ?></textarea>
                    <input type="hidden" name="_csrf" value="<?= Yii::$app->request->getCsrfToken() ?>">

                </form>
            </div>
        </div>
    </div>
</div>

<script src="<?= Render::static('flyer/flyer.class.js') ?>"></script>
<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<!-- 上传图片类 -->
<link href="<?= Render::static('uploader/loader.css') ?>" rel="stylesheet">
<script src="<?= Render::static('uploader/loader.core.single.class.js') ?>"></script>
<script src="<?= Render::static('uploader/loader.preview.class.js') ?>"></script>
<script>
    var checkerClass = new checker();
    $(document).ready(function() {
        // 性别选择
        $('input[name=gender][value=<?= $user->gender ?>]').click();
        // 表单美化
        (new flyer).init({ form: '#flyer-create' });

        // 初始化 微信二维码上传插件
        (new loaderPerview).init({
            conter: '#wechat-qrcode', name: 'wechat_qrcode',
            prevLoaders: "<?= Render::upload($user->wechat_qrcode) ?>"
        });

        // 初始化 身份证正面照上传插件
        (new loaderPerview).init({
            conter: '#face-photo', name: 'face_photo',
            prevLoaders: "<?= Render::upload($user->face_photo) ?>"
        });
        if($('.designs .design-one').length) {
            $.each($('.designs .design-one'), function(index) {
                var designs = $.parseJSON('<?= $designs ?>');
                (new loaderPerview).init({
                    conter: this, name: 'design' + index, maxSize: 1024 * 1024 * 4,
                    prevLoaders: designs[index] ? designs[index] : ''
                });
            });
        }
        <?php if($user->information()) { ?>
        $('#flyer-create').find('input, textarea').attr('disabled', true);
        return true;
        <?php } ?>
        // 表单数据验证
        checkerClass.init({ ruleDom: '#flyer-create-json' });

        // 多选栏目选择数量控制
        var checkboxLimit = ['category_id', 'style', 'model'];
        $.each(checkboxLimit, function(index) {
            var name = checkboxLimit[index];
            var currentEvent = "input[name='" + name + "[]']";
            $(currentEvent).bind('change', function() {
                var checkboxs = "input[name='" + $(this).attr('name') + "']";
                if($(checkboxs + ':checked').length > 3) {
                    $(this).removeAttr('checked');
                    layer.msg('最多只能选择3个');
                    return false;
                }
                return true;
            });
        });

        // 发送验证码操作
        //tableHandler.requestSingle({
        //    button: '#get-captcha', isConfirm: false, isShadow: false,
        //    url: "<?//= Url::to('@web/user/captcha-mobile') ?>//",
        //    beforeRequest: function(param) {
        //        param.data = { type: 'user-information' };
        //        $('#get-captcha').attr('disabled', true);
        //    },
        //    requestFail: function(param) {
        //        $('#get-captcha').removeAttr('disabled');
        //    },
        //    requestSuccess: function (param) {
        //        var seconds = 60;
        //        var timer = setInterval(function() {
        //            if(--seconds > 0) {
        //                $('#get-captcha').text(seconds + '秒后重试');
        //            }
        //            else {
        //                $('#get-captcha').text('重新发送');
        //                $('#get-captcha').removeAttr('disabled');
        //                clearInterval(timer);
        //            }
        //        }, 1000);
        //    }
        //});

        $('#save-button').bind('click', function() {
            if(checkerClass.validate()) {
                $('#save-button').attr('disabled', true).html('保存中');
                $.ajax({
                    url: "<?= Url::to('@web/designer/information') ?>",
                    cache: false,
                    data: new FormData($('#flyer-create')[0]),
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    dataType:"json",
                    success: function(response) {
                        if(response.code == 200) {
                            layer.alert('资料保存成功', { icon: 6 }, function() {
                                window.location.href = "<?= Url::to('@web/employer/employment-appeal') ?>";
                            });
                        }
                        else {
                            layer.msg(response.message, { shift: 6 });
                        }
                        $('#save-button').removeAttr('disabled').html('保存');
                    }
                });
            }
        });
    });
</script>